<template>
	<view class="servicecharge_wp">
		<view class="servicecharge_nav">
			<view class="servicecharge_nav_number">628.90</view>
			<view>服务费</view>
		</view>
		<view class="servicecharge_detailed">明细</view>
		<view class="servicecharge_list">
			<view class="servicecharge_item" v-for="item in 3">
				<view class="servicecharge_info">
					<text>服务费</text>
					<text>2022-02-02 12:49</text>
				</view>
				<view class="servicecharge_number">-144.00</view>
			</view>
		</view>
		<view class="loading_message">
			<image src="../product/static/loading.gif"></image>
			<view>到底了~</view>
		</view>
		<view class="servicecharge_buttons">
			<view @click="$navTo('../userservice/shellexchange?status=2')" class="servicecharge_buttons_item shell_buttons">兑换米币</view>
			<view @click="$navTo('../userservice/serverrecharge')" class="servicecharge_buttons_item withdrawal_buttons">充值</view>
		</view>
	</view>
</template>

<script>
</script>

<style lang="scss">
page{
	background-color: #f2f2f2;
	color: $font-color-dark;
}
.servicecharge_wp{
	padding-bottom: 140upx;
}
.servicecharge_nav{
	background-color: $base-color;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	height: 260upx;
}
.servicecharge_nav_number{
	font-size: 40upx;
	line-height: 60upx;
}
.servicecharge_detailed{
	font-size: 30upx;
	padding: 20upx;
}
.servicecharge_item{
	background-color: #fff;
	border-radius: 10upx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20upx;
	height: 140upx;
	margin: 0 20upx 20upx;
}
.servicecharge_info{
	display: flex;
	flex-direction: column;
}
.servicecharge_info text{
	line-height: 50upx;
}
.servicecharge_info text:nth-of-type(2){
	color: $font-color-light;
}
.servicecharge_number{
	font-weight: bold;
}
.loading_message image{
	display: block;
	margin: 0 auto;
	height: 60upx;
	width: 60upx;
}
.loading_message view{
	text-align: center;
	color: $font-color-spec;
}
.servicecharge_buttons{
	position: fixed;
	bottom: 30upx;
	display: flex;
	align-items: center;
	padding: 0 10upx;
	width: 100%;
}
.servicecharge_buttons_item{
	background-color: #f0f;
	border-radius: 40upx;
	color: #fff;
	flex: 1;
	font-size: 28upx;
	margin: 0 10upx;
	text-align: center;
	line-height: 80upx;
	letter-spacing: 3px;
}
.shell_buttons{
	background: linear-gradient(to right,#ffac30,#fa436a,#F56C6C);
}
.withdrawal_buttons{
	background: linear-gradient(to right,#EA5249,#EC694C,#EB835D);
}
</style>
